<template>
  <div>
    <el-upload
      :class="{disabled:uploadDisabled}"
      :limit="1"
      :file-list="fileList"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :action="actionUrl"
      :http-request="uploadFile"
      list-type="picture-card">
      <i class="el-icon-plus"/>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  /* eslint-disable vue/require-prop-types */
  props: ['imgLogoUrl', 'dialogType', 'status'],
  data() {
    return {
      actionUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      uploadDisabled: false,
      fileList: []
    }
  },
  computed: {

  },
  beforeMount() {
    if (this.status !== 1) {
      const obj = { 'url': this.imgLogoUrl }
      this.fileList.push(obj)
    }
    this.fileListImg()
    this.initUploadFileurl()
  },
  methods: {
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
    },
    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      fd.append('resPath', this.resPath)

      const fileSize = fd.size / 1024 / 1024
      if (fileSize > 2) {
        this.$message({
          message: '上传图片不能大于2M',
          type: 'warning'
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        axios.post(content.action, fd).then(res => {
          loading.close()
          if (res.data.code === 1) {
            this.$emit('emitSuccess', [res.data.data[0].maxImageUrl, this.dialogType])
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            console.log(res.data.data)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res.message
          })
          loading.close()
        })
      }
    },
    fileListImg() {
      if (this.fileList.length > 0) {
        this.uploadDisabled = true
      } else {
        this.uploadDisabled = false
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      if (fileList.length > 0 || this.fileList.lengt > 0) {
        this.uploadDisabled = true
      } else {
        this.uploadDisabled = false
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess(response, file, fileList) {
      if (fileList.length > 0 || this.fileList.lengt > 0) {
        this.uploadDisabled = true
      } else {
        this.uploadDisabled = false
      }
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多只能上传一张',
        type: 'warning'
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss">

</style>
